<template>
    <div>
        <a-modal
            :title="modalTitle"
            :visible="visible"
            :confirm-loading="confirmLoading"
            @ok="visible = false"
            @cancel="visible = false"
            :width="800"
            class="planProduction-multipleTaskPrompts-modal"
            :dialogStyle="{top:'20px'}"
        >
            <div :key="multipleTaskPromptsKey" class="planProduction-multipleTaskPrompts-box">
                <table border bordercolor="#d9d9d9" style="width: 100%; margin-top: 15px;">
                    <tr>
                        <td class="title-left-v">
                            请选择待合并事项
                            <br/>
                            <span style="color: #ed5565;">（注意勾选顺序）</span>
                        </td>
                        <td colspan="3">
                            <a-checkbox-group @change="onChange" :key="currentListKey">
                                <div v-for="(item,index) in currentList" :key="index">
                                    <a-checkbox  :value="item.id" >{{ item.fywflname }}--{{ item.fsxmc }}</a-checkbox>
                                </div>
                            </a-checkbox-group>
                        </td>
                    </tr>
                    <tr>
                        <td class="title-left-v">
                            <div class="tips-box">
                                <span>*</span>
                                已选事项
                            </div>
                        </td>
                        <td colspan="3">
                            <div v-for="(item,index) in selectList" :key="index" style="display: flex;align-items: center;" >
                                <span>{{ index+1 }}、{{ item.fywflname }}--{{ item.fsxmc }}</span>
                                <a-icon style="color: #ed5565;font-size: 18px;padding-left: 5px;" type="minus-circle" @click="removeChange(item)"/>
                            </div>
                        </td>
                    </tr>
                </table>
                <commpVxeTable
                    v-if="selecId.length"
                    :key="selectTemplateKey"
                    :config="selectTemplateConfig" 
                    :columns="selectTemplatecolumnsVxe" 
                    :formItem="selectTemplateformItem"
                    @radioChange="selectTemplateChange"
                    ref="acceptanceRegistrationRef"
                >
                </commpVxeTable>
            </div>
            <template slot="footer">
                <div style="display: flex;justify-content: flex-end;">
                    <a-button @click="visible = false" >关闭</a-button>
                    <a-button style="margin-left: 10px;" class="blue-btn" type="primary" @click="handleOk()" >确定</a-button>
                </div>
            </template>
            <personnelList
             ref="personnelListRef" 
             @checkPersonnel="checkPersonnel" 
             :modaObj="modaObj" 
             :radioCheck="true"
             />
        </a-modal>
    </div>
</template>
<script>
import personnelList from '../../../../administrativeOffice-new/modal/personnelList.vue'
import { hbjcgetBhbsqsxList, hbjcinitHbsqsxWjjl, } from './service/index'
import assessCheckApi from './service/api'
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
export default {
    components:{
        personnelList,
        commpVxeTable,
    },
    data() {
        return {
            visible: false,
            confirmLoading: false,
            currentList:[],
            currentData:{},
            checkboxData:[],
            selectTemplateKey:null,
            selectTemplateConfig:{
                api:assessCheckApi.queryYwflWjmbList,
                rowId: 'id',
                height:400,
                autoHidden:true,
                pageSize:100,
                selectType:'radio',
                listData:'wjmbList',
                paramet:{
                }
            },
            selectTemplatecolumnsVxe:[{
                type:'radio',
                width:60,
            },{
                title: '模板标题', //列头显示文字
                field: 'fmbbt',
                key: 'fmbbt',
            },{
                title: '文件类型', //列头显示文字
                field: 'fwjlx',
                key: 'fwjlx',
            },{
                title: '模板类型1', //列头显示文字
                field: 'fmblx1',
                key: 'fmblx1',
            }],
            selectTemplateformItem:[{
                label: '模板标题',
                model: 'fmbbt',
            }],
            templateId:'',
            multipleTaskPromptsKey:null,
            currentListKey:null,
            selectList:[],
            selecId:[],
            templateType:'',
            modalTitle:''
        };
    },
    methods: {
        getData(val,type,title){
            this.selectList = []
            this.selecId = []
            this.modalTitle = title
            this.templateType = type
            this.currentData = val
            this.currentData.ids = ''
            this.templateId = ''
            this.currentList = []
            // this.selectTemplateConfig.paramet = {
            //     sqsxid:this.currentData.sqsxid,
            //     type:this.templateType
            // }
            // this.selectTemplateKey = Date.now()
            hbjcgetBhbsqsxList({sqsxid:val.sqsxid}).then(res=>{
                if(res.code == 200){
                    //console.log(res.result.records)
                    this.currentList = res.result.records
                }
                this.multipleTaskPromptsKey = Date.now()
            })
            
        },
        onChange(val){
            //console.log(val)
            if(val.length) {
                // this.currentData.ids = val.join(',')
                this.currentList.forEach((item,index) => {
                    if(val[0] == item.id){
                        this.currentList.splice(index,1)
                        this.selectList.push({...item,index:index})
                        this.selecId.push(item.id)
                        this.currentData.ids = this.selecId.join(',')
                        this.currentListKey = Date.now()
                        this.templateId = ''
                        this.selectTemplateConfig.paramet = {
                            sqsxid:this.selecId[0],
                            type:this.templateType
                        }
                        this.selectTemplateKey = Date.now()
                    }
                });
            }else{
                // this.currentData.ids = ''
            }
        },
        removeChange(row){
            this.selectList.forEach((item,index)=>{
                if(row.id == item.id){
                    this.currentList.push(item)
                    this.selectList.splice(index,1)
                    this.selecId.splice(index,1)
                    this.currentData.ids = this.selecId.join(',')
                    this.currentListKey = Date.now()
                    this.templateId = ''
                    this.selectTemplateConfig.paramet = {
                        sqsxid:this.selecId[0],
                        type:this.templateType
                    }
                    this.selectTemplateKey = Date.now()
                }
            })
        },
        selectTemplateChange(val){
            this.templateId = val.row.id
        },
        handleOk(val){
            if(!this.currentData.ids) {this.$message.warning('请先选择事项'); return false}
            if(!this.templateId) {this.$message.warning('请先选择模板'); return false}
            hbjcinitHbsqsxWjjl({
                sqsxid:this.currentData.sqsxid,
                id:this.templateId,
                ids:this.currentData.ids,
                type:this.templateType
            }).then(res=>{
                if(res.code == 200){
                    this.$message.success(res.message)
                    this.visible = false
                    this.$emit('successChange',['审评方案'])
                }else{
                    this.$message.warning(res.message)
                }
            })
        },
    },
};
</script>
<style lang="less">
.planProduction-multipleTaskPrompts-modal{
    .ant-modal-body {
        padding: 8px;
    }
    .ant-divider-with-text-center{
        margin-bottom: 0px;
    }
    .ant-checkbox-wrapper{
        font-size: 16px;
    }
    td{
        padding: 5px;
        height: 30px;
    }
    .title-left-v{
        text-align: right;
        width: 100px;
        font-weight: 600;
        font-size: 16px;
        background-color:#e6f7ff;
        font-family: simHei;
        color: rgba(0, 0, 0, 0.85);
    }
    .planProduction-multipleTaskPrompts-box{
        td{
            padding: 5px;
            height: 30px;
        }
        .title-left-v{
            text-align: center;
            width: 140px;
            font-weight: 600;
            font-size: 16px;
            background-color:#e6f7ff;
            font-family: simHei;
            color: rgba(0, 0, 0, 0.85);
            .tips-box{
                display: flex;
                align-items: center;
                justify-content: center;
                span{
                    color: #ed5565;
                    font-size: 20px !important;
                }
            }
        }
        .ant-checkbox-wrapper + .ant-checkbox-wrapper{
            margin: 0;
        }
    }
}
</style>